<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .navall {
        width: 26rem;
        height: auto;
        margin: 0 auto;
    }

    .header {
        width: 26rem;
        height: 3rem;
        background-color: #ff8a00;
        position: relative;
    }

    .header>img {
        position: absolute;
    }

    .header>img:nth-of-type(1) {
        width: 7rem;
        height: 2.5rem;
        left: 3rem;
        top: 0.2rem;
    }

    .header>img:nth-of-type(2) {
        width: 2rem;
        height: 2.7rem;
        left: 19rem;
    }

    .header>img:nth-of-type(3) {
        width: 2rem;
        height: 2.7rem;
        left: 22rem;
    }

    .first {
        width: 26rem;
        height: 2rem;
        line-height: 2rem;
        text-indent: 1.5em;
        font-size: 0.7rem;
        border-bottom: 1px solid black;
    }

    .first>span:nth-child(1) {
        font-weight: 700;
    }

    .logochoice {
        width: 26rem;
        height: 2.1rem;
        border: none;
       border-bottom: 1px solid rgb(128, 128, 128);
        display: flex;
        font-size: 0.7rem;
        /* align-items: center; */
        justify-content: space-around;
    }

    .logochoice>div:nth-child(1) {
        width: 10rem;
        height: 2rem;
        text-align: center;
        line-height: 1.8rem;

        border-bottom: 0.2rem solid #ff8a00;
    }
    .logochoice>div:nth-child(2) {
        width: 10rem;
        height: 2rem;
        text-align: center;
        line-height: 1.8rem;
    }
    .number>input {
        width: 25.6rem;
        height: 2rem;
       border: none;
       border-bottom: 1px solid rgb(128, 128, 128);
        outline: none;
    }

    .passward>input {
        width: 25.6rem;
        height: 2rem;
        outline: none;
        border: none;
       border-bottom: 1px solid rgb(128, 128, 128);
    }
    .logo{
        width: 16rem;
        height: 2rem;
        margin: 1rem auto;
        text-align: center;
        line-height: 2rem;
        color: aliceblue;
        border-radius: 0.2rem;
        background-color:#ff8a00;
    }
    [placeholder]{
        text-indent: 2em;
    }
    .now{
        display: flex;
        justify-content: space-between;
        font-size: 0.6rem;
    }
    .now>div:nth-child(1){
        color: #ff8a00;
    }
</style>

<body>
    <div class="navall">
        <div class="header">
            <img src="./image/index/logo.jpg" alt="">
            <img src="./image/index/my.jpg" alt="">
            <img src="./image/index/xiazai.jpg" alt="">
        </div>
        <div class="first">
            <span>首页</span>
            <span>></span>
            <span>我的</span>
            <span>></span>
            <span>登录</span>
        </div>
        <div class="logochoice">
            <div>普通登录</div>
            <div>验证码快捷登录</div>
        </div>
        <div class="number">
            <input type="text" placeholder="请输入手机号码">
        </div>
        <div class="passward">
            <input type="passward" placeholder="请输入密码">
        </div>
        <div class="logo">立即登录</div>
        <div class="now">
            <div>立即注册</div>
            <div>忘记密码</div>
        </div>
    </div>

</body>

</html>